<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>缴费订单记录</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/front/css/font.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/front/css/index.css">
<script
	src="${pageContext.request.contextPath}/front/lib/layui/layui.js"
	charset="utf-8"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/front/js/index.js"></script>

</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i></a>
	</div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body ">
						<form class="layui-form layui-col-space5">
							<div class="layui-inline layui-show-xs-block">
								<input class="layui-input" autocomplete="off" placeholder="开始日"
									name="start" id="start">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<input class="layui-input" autocomplete="off" placeholder="截止日"
									name="end" id="end">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<input type="text" name="roomNo" placeholder="请输入房间号"
									value="${sessionScope.ownerSession.roomNo}" readonly="readonly"
									id="pay_no_kw" autocomplete="off" class="layui-input"
									required="required">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<button class="layui-btn" lay-submit="" lay-filter="sreach"
									type="button" onclick="pay_search()">
									<i class="layui-icon">&#xe615;</i>
								</button>
							</div>
						</form>
					</div>

					<div class="layui-card-body layui-table-body layui-table-main">
						<table class="layui-table layui-form" id="table-goodslist">
							<thead>
								<tr>
									<th><input type="checkbox" lay-filter="checkall" name=""
										lay-skin="primary"></th>
									<th>缴费订单编号</th>
									<th>房间号</th>
									<th>起始日期</th>
									<th>截止日期</th>
									<th>缴费类别</th>
									<th>金额</th>
									<th>缴费日期</th>
									<th>状态</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>

								<tr>
									<td><input type="checkbox" name="id" value="1"
										lay-skin="primary">
									<td>3</td>
									<td>101</td>
									<td>2022-01-04 23:24:41</td>
									<td>2022-04-04 23:24:41</td>
									<td>物业费</td>
									<td>18000</td>
									<td>2022-04-04 23:24:41</td>
									<td><i class="layui-icon" style="color: red">&#x1006;</i>已缴费
									</td>

									<td class="td-manage"><a title="编辑" href="javascript:;"
										onclick="xadmin.open('编辑','articletypeadd.html','800','510','1')"
										class="ml-5" style="text-decoration: none"> <i
											class="layui-icon">&#xe642;</i>
									</a> <a title="删除" href="javascript:;" onclick="goods_del('1')"
										style="text-decoration: none"> <i class="layui-icon">&#xe640;</i>
									</a></td>
								</tr>

							</tbody>
						</table>
					</div>

					<div class="layui-card-body ">
						<div class="page">

							<!-- 从官网复制一段完整分页功能的静态代码，后面拿到脚本中拼接 -->


							<div class="layui-table-page">
								<div id="layui-table-page1">
									<div class="layui-box layui-laypage layui-laypage-default"
										id="layui-laypage-2">
										<a href=" " class="layui-laypage-prev layui-disabled"
											data-page="0"><i class="layui-icon"></i></a> <span
											class="layui-laypage-curr"> <em
											class="layui-laypage-em"></em><em>1</em>
										</span> <a href="javascript:;" data-page="2">2</a> <a
											href="javascript:;" data-page="3">3</a> <span
											class="layui-laypage-spr">…</span> <a href="javascript:;"
											class="layui-laypage-last" title="尾页" data-page="100">100</a>
										<a href="javascript:;" class="layui-laypage-next"
											data-page="2"><i class="layui-icon"> </i></a> <span
											class="layui-laypage-skip">到第<input type="text"
											min="1" value="1" class="layui-input">页
											<button type="button" class="layui-laypage-btn">确定</button></span> <span
											class="layui-laypage-count">共 1000 条</span> <span
											class="layui-laypage-limits"> <select lay-ignore="">
												<option value="10" selected="">10 条/页</option>
												<option value="20">20 条/页</option>
												<option value="30">30 条/页</option>
												<option value="40">40 条/页</option>
												<option value="50">50 条/页</option>
												<option value="60">60 条/页</option>
												<option value="70">70 条/页</option>
												<option value="80">80 条/页</option>
												<option value="90">90 条/页</option>
										</select>
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<!-- 引入JQuery -->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/front/js/jquery.js"></script>

<script>
	//定义一个全局变量初始页码，默认记录数
	let pageNum = 1;
	let pageSize = 2;
	/*页面加载进行商品查询*/
	pay_search_page();
	/*商品-查询*/
	function pay_search_page() {
		//对每页/条数变量进行校验
		pageSize = $("#layui-laypage-2 select").val();
		//如果不存在则设置初始值
		if (pageSize == null) {
			pageSize = 2;
		}
		//使用AJAX技术发起异步请求
		$
				.ajax({
					async : true,
					type : "get",
					url : "${pageContext.request.contextPath}/PayServlet",
					data : {
						op : "pageByWeiJiao",//分页接口
						roomNo : $("#pay_no_kw").val(),//商品关键字
						pageNum : pageNum,//页码
						pageSize : pageSize,
						payType:1,
						start : $("#start").val(),
						end : $("#end").val()

					//每页记录数
					},
					contentType : "application/x-www-form-urlencoded",
					dataType : "json",
					success : function(result, status, xhr) {
						//渲染表格数据
						let content = "";
						//判断是否存在数据
						if (result.data != null) {
							$
									.each(
											result.data.list,
											function(i, obj) {
												content += "<tr>"
														+ "<td><input type=\"checkbox\"  name=\"id\" value=\"1\" lay-skin=\"primary\"></td>"
														+ "<td>" + obj.payNo
														+ "</td>" + "<td>"
														+ obj.roomNo + "</td>"
														+ "<td>"
														+ obj.payStartTime
														+ "</td>" + "<td>"
														+ obj.payEndTime
														+ "</td>" + "<td>"
														+ obj.payType.typeName
														+ "</td>" + "<td>"
														+ obj.payMoney
														+ "</td>" + "<td>"
														+ obj.payTime + "</td>"

														+ "<td>";

												if (obj.payStatus == 0) {
													content += "<i class=\"layui-icon\" style=\"color:red\">&#x1006未缴费</i>"
															+ "</td>" + "<td>";
												} else {
													content += "<i class=\"layui-icon\" style=\"color:#06f957\">&#xe605已缴费</i>"
															+ "</td>" + "<td>";
												}

												if (obj.payStatus == 0) {
													content += " <a title=\"缴费\" href=\"javascript:;\" onclick=\"xadmin.open('缴费','immediately_pay.jsp?payNo="
															+ obj.payNo
															+ "','800','510','1')\" class=\"ml-5\" style=\"text-decoration:none\">"
															+ " <i class=\"layui-icon\">&#xe65e;</i>"
															+ "</a>"

															+ "  </td>"
															+ "</tr>";
												} else {
													content += "该订单已缴费，禁止操作";
												}

											});

							//更新指定表格
							$("#table-goodslist tbody").html(content);
						} else {
							//更新指定表格
							$("#table-goodslist tbody").empty();
						}
						//2、渲染分页栏目
						let pageContent = "";
						if (result.data != null) {
							//拼接上一页
							//判断是否为第一页
							if (result.data.pageNum == 1) {
								pageContent = "<span class=\"layui-laypage-prev layui-disabled\" data-page=\"0\"><i class=\"layui-icon\">上一页</i></span>";
							} else {
								pageContent = "<a href=\"javascript:;\" class=\"layui-laypage-prev\" data-page=\""
										+ (result.data.pageNum - 1)
										+ "\"> <i class=\"layui-icon\">上一页</i></a>";
							}
							//拼接页码
							for (let i = 1; i <= result.data.pages; i++) {
								//激活当前页码
								if (i == result.data.pageNum) {
									pageContent += "<span class=\"layui-laypage-curr\" data-page=\""+i+"\"><em class=\"layui-laypage-em\"></em><em>"
											+ i + "</em></span>";
								} else {
									pageContent += "<a href=\"javascript:;\" data-page=\""+i+"\">"
											+ i + "</a>";
								}
							}
							//判断是否为最后一页
							//拼接下一页
							if (result.data.pageNum == result.data.pages) {
								pageContent += "<span class=\"layui-laypage-next layui-disabled\" data-page=\""
										+ (result.data.pageNum + 1)
										+ "\"><i class=\"layui-icon\">下一页</i></span>";
							} else {
								pageContent += "<a href=\"javascript:;\" class=\"layui-laypage-next\" data-page=\""
										+ (result.data.pageNum + 1)
										+ "\"><i class=\"layui-icon\">下一页</i></a>";
							}
							//拼入页码输入框
							pageContent += "<span class=\"layui-laypage-skip\">到第<input type=\"text\" min=\"1\" max=\""+result.data.pageNum+"\" value=\"1\" class=\"layui-input\" >页"
									+ "<button type=\"button\" class=\"layui-laypage-btn\" >确定</button>"
									+ "</span>";
							//拼入总条数
							pageContent += "<span class=\"layui-laypage-count\">共 "
									+ result.data.total + "条</span>";
							//下拉框
							pageContent += "<span class=\"layui-laypage-limits\">"
									+ "<select lay-ignore=\"\" >"
									+ "<option value=\"2\">2 条/页</option>"
									+ "<option value=\"5\">5 条/页</option>"
									+ "<option value=\"10\">10 条/页</option>"
									+ "</select>" + "</span>";
							//设置到指定的位置
							$("#layui-laypage-2").html(pageContent);
							//为下拉框设置被选中的选项
							$("#layui-laypage-2 select option")
									.each(
											function() {
												if ($(this).val() == result.data.pageSize) { //判断
													$(this).prop("selected",
															"selected");
												}
											});
						} else {
							pageContent = "查无数据";
							$("#layui-laypage-2").html(pageContent);
						}
					},
					error : function() {
						alert("异步请求失败");
					}
				});
	}

	/*上一页 下一页 页码*/
	$("body").on("click", "#layui-laypage-2 a", function() {
		//获取超链接的自定义属性data-page上的页码，对pageNum重新赋值
		pageNum = $(this).data("page");
		//调用查询方法
		pay_search_page();
	});
	/*确定页码*/
	$("body").on("click", "#layui-laypage-2 button", function() {
		//获取输入框的页码
		let inputPageNum = $("#layui-laypage-2 input").val();
		//获取最大页数
		let maxPage = $("#layui-laypage-2 input").prop("max");
		if (inputPageNum >= 1 && inputPageNum <= maxPage) {
			//为pageNum设置
			pageNum = inputPageNum;
			//调用查询方法
			pay_search_page();
		} else {
			//使用layui的layer弹出错误信息
			layui.use('layer', function() {
				layer.msg("输入页码只能在1-" + maxPage + "之间", {
					icon : 2,
					time : 3000
				});
			});
		}
	});

	/*条数下拉框*/
	$("body").on("change", "#layui-laypage-2 select", function() {
		//设置页码
		pageNum = 1;
		//调用查询方法
		pay_search_page();
	});
	/*商品-搜索事件*/
	function pay_search() {
		//设置页码
		pageNum = 1;
		//调用查询方法
		pay_search_page();
	}
</script>














<script>
	/*商品-删除*///同步请求
	/**
	 function goods_del(goodsId){
	 layer.confirm('确认要删除吗？', {
	 icon : 3,
	 title : '提示信息'
	 }, function(index) {
	 //请求后端控制器删除数据
	 location.href="${pageContext.request.contextPath}/GoodsServlet?op=delete&goodsId="+goodsId;
	 });
	 }**/
	/**
	 //读取相应消息
	 let message="${requestScope.msg}";
	 if(message!=""){
	 //使用layui的layer弹出错误信息
	 layui.use('layer',function(){
	 layer.mas(message,{icon:1,time:3000});
	 });
	 }**/
</script>
<script>
	layui.use([ 'laydate', 'form' ], function() {
		var laydate = layui.laydate;
		var form = layui.form;

		// 监听全选
		form.on('checkbox(checkall)', function(data) {

			if (data.elem.checked) {
				$('tbody input').prop('checked', true);
			} else {
				$('tbody input').prop('checked', false);
			}
			form.render('checkbox');
		});

		//执行一个laydate实例
		laydate.render({
			elem : '#start' //指定元素
		});

		//执行一个laydate实例
		laydate.render({
			elem : '#end' //指定元素
		});

	});

	/*用户-添加*/
	function member_add(title, url, id, w, h) {

		xadmin.open(title, url, id, w, h);
	}

	/*用户-停用*/
	function member_stop(obj, id) {
		layer.confirm('确认要停用吗？', {
			icon : 3,
			title : '提示信息'
		}, function(index) {

			if ($(obj).attr('title') == '启用') {

				//发异步把用户状态进行更改
				$(obj).attr('title', '停用')
				$(obj).find('i').html('&#xe62f;');

				$(obj).parents("tr").find(".td-status").find('span').addClass(
						'layui-btn-disabled').html('已停用');
				layer.msg('已停用!', {
					icon : 5,
					time : 1000
				});

			} else {
				$(obj).attr('title', '启用')
				$(obj).find('i').html('&#xe601;');

				$(obj).parents("tr").find(".td-status").find('span')
						.removeClass('layui-btn-disabled').html('已启用');
				layer.msg('已启用!', {
					icon : 5,
					time : 1000
				});
			}

		});
	}
</script>
</html>